<template>
    <!--<router-link to="/traning/1">去实训</router-link>-->
    <Row :gutter="32">
        <Col :span="18">
        <Row :gutter="32">
            <Col :span="8">
            <Card class="h315 zhcj">
                <div class="detail">
                    <a @click="examGradeDetail">成绩详情</a>
                </div>
                <div class="score">{{(parseFloat(kSScore)+parseFloat(sXSore)+parseFloat(jSScore)).toFixed(1)}}分</div>
                <div class="text">综合成绩</div>
                <div>
                    <Row class="row-border">
                        <Col :span="12">考试得分</Col>
                        <Col :span="12">{{kSScore}}</Col>
                        <Col :span="12">实训得分</Col>
                        <Col :span="12">{{sXSore}}</Col>
                        <Col :span="12">教师打分</Col>
                        <Col :span="12">{{jSScore}}</Col>
                    </Row>
                </div>
            </Card>
            </Col>
            <Col :span="8">
            <Card class="h315 qp">
                <img style="height:191px;width:100%" :src="qp" />
                <Button style="width:90%" type="primary" @click="goQp" class="max-btn">QP专项练习</Button>
            </Card>
            </Col>
            <Col :span="8">
            <Card class="h315 tgzs">
                <img style="height:191px;width:100%" :src="tgzs" />
                <Button style="width:90%" type="primary" class="max-btn">报关知识学习</Button>
            </Card>
            </Col>
        </Row>
        <!--实训-->
        <div>
            <Row class="mt20 bgw bt10">
                <Row class="bt10">
                    <Col :span="12">
                    <span class="sx-title">实训</span>
                    </Col>
                    <Col :span="12" class="text-r">
                    <a @click="moreTrain">更多</a>
                    </Col>
                </Row>

                <Row :gutter="32">
                    <Col :span="8" v-for="(item,index) in trainList" :key="index">
                    <Card >
                        <Row>
                            <Col :span="12" class="fb">{{item.name}}</Col>
                            <Col :span="12" class="text-r">{{stuTrainingStatus[item.status]}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">实训类型:</Col>
                            <Col :span="16">{{tasks[item.task]}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">实训案例:</Col>
                            <Col :span="16">实训案例</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">实训时间:</Col>
                            <Col :span="16">{{item.startTime}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">结束时间</Col>
                            <Col :span="16">{{item.endTime}}</Col>
                        </Row>
                        <div class="tc">
                            <Button type="primary" class="max-btn" @click="startTraining(item.id)">开始实训</Button>
                        </div>
                    </Card>
                    </Col>
                </Row>
            </Row>
        </div>
        <!--考试-->
        <div>
            <Row class="mt20 bgw bt10">
                <Row class>
                    <Col class="bt10" :span="12">
                    <span class="sx-title">考试</span>
                    </Col>
                    <Col class="bt10 text-r" :span="12">
                    <a @click="goMoreExam">更多</a>
                    </Col>
                </Row>

                <Row :gutter="32">
                    <Col :span="8" v-for="(item,index) in examList3" :key="index">
                    <Card>
                        <Row>
                            <Col :span="12" class="fb">{{item.examName}}</Col>
                            <Col :span="12" class="text-r">{{examStatus[item.status]}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">题量:</Col>
                            <Col :span="16">{{item.num}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">总分:</Col>
                            <Col :span="16">{{item.scores?item.scores:''}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">开始时间:</Col>
                            <Col :span="16">{{item.startTime}}</Col>
                        </Row>
                        <Row class="bt10">
                            <Col :span="8" class="text-r pr10">结束时间:</Col>
                            <Col :span="16">{{item.endTime}}</Col>
                        </Row>
                        <div class="tc">

                            <Button v-if="item.status==1" type="primary" class="max-btn">未开始</Button>
                            <Button v-else-if="item.status==2" @click="goStart(item)" type="primary" class="max-btn">开始考试</Button>
                            <Button v-else-if="item.status==3" type="primary" @click="ckStart(item)" class="max-btn">查看试卷</Button>
                            <Button v-else-if="item.status==4" type="primary" @click="ckStart(item)" class="max-btn">查看试卷</Button>
                        </div>
                    </Card>
                    </Col>

                </Row>
            </Row>
        </div>
        </Col>
        <Col class="bgw p10" :span="6">
        <Row class="box gray" v-for="(item,index) in topicList" :key="index">
            <Row class="bzt ftb">{{item.creatorName}}</Row>
            <Row class="bzt">
                <Col :span="18" class="time">{{item.createTime}}</Col>
                <Col class="text-r" :span="6">回复:{{item.replyNum}}</Col>
            </Row>
            <Row class="bzt">{{item.topic}}</Row>
            <Row class="bzt">
                <Col :span="24" class="text-r">
                <a @click="showTip(index)">查看全部回复</a>
                </Col>
            </Row>
            <Row class="bzt">
                <Col :span="18">
                <Input
                    v-model="item.remark"
                    type="textarea"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder
                />
                </Col>
                <Col class="text-r" :span="6">
                <Button type="primary" @click="replyOne(item)">回复</Button>
                </Col>
            </Row>
        </Row>
        <div class="page-footer">
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="params.total"
                @change="getList"
            />
        </div>
        </Col>
        <div v-if="topicVis">
            <Modal class="relay-modal" v-model="topicVis" width="900px" height="800px" @on-ok="ok" @on-cancel="cancel">
                <div class="pd20" >
                    <Row class="mt20">
                        <Row class="box gray">
                            <Row class="bzt ftb">{{topicList[now].creatorName}}</Row>
                            <Row class="bzt">
                                <Col :span="18" class="time">{{topicList[now].createTime}}</Col>
                                <Col class="text-r" :span="6">回复:{{topicList[now].replyNum}}</Col>
                            </Row>
                            <Row class="bzt">{{topicList[now].topic}}</Row>
                        </Row>
                    </Row>

                    <Row class="reply-box" v-for="(item,index) in replyList" :key="index">
                        <Col :span="18">{{item.creatorName}}</Col>
                        <Col :span="6" class="time">{{item.createTime}}</Col>
                        <div class="ws">
                            {{item.replyContent}}
                        </div>
                    </Row>
                    <Pagination
                        :pageSize.sync="replyParams.pageSize"
                        :current.sync="replyParams.pageNum"
                        :total="replyParams.total"
                        @change="getList"
                    />
                    <Row class="bzt" >
                        <Col :span="18">
                        <Input v-model="topicList[now].remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""/>
                        </Col>
                        <Col class="text-r" :span="6"><Button @click="replyOne(topicList[now])">回复</Button></Col>
                    </Row>
                </div>
            </Modal>

        </div>
    </Row>
</template>
<script>
import { stuIndexStatus, caseTypes, stuTrainingStatus } from '@/libs/enums'
import qp from '@/assets/images/qp.png'
import bgzs from '@/assets/images/bgzs.png'
import { topicList, replyTopic, seeReply } from '@/api/topic'
import { indexExam, startExam, stuGrade, trainList, viewExam } from '@/api/studentExam'
export default {
    name: 'Student',
    inject: ['nextPageReload'],
    data () {
        return {
            tasks: {
                1: '许可证申请',
                2: '原产地证申请',
                3: '成品出口申报',
                4: '料件进口申报',
                5: '保税加工贸易',
                6: '出口申报',
                '': ''
            },
            kSScore: '',
            sXSore: '',
            jSScore: '',
            stuTrainingStatus: stuTrainingStatus,
            caseTypes: caseTypes,
            trainList: [],
            gradeList: [],
            now: 0,
            item: {},
            text: '',
            topicList: [],
            replyList: [],
            topicVis: false,
            tgzs: bgzs,
            qp: qp,
            params: {
                pageNum: 1,
                pageSize: 3,
                total: 0
            },
            replyParams: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                topic: '',
                topicId: ''
            },
            examParams: {
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            examList3: [],
            examStatus: stuIndexStatus
        }
    },
    computed: {},
    methods: {
        moreTrain () {
            this.nextPageReload()
            this.$router.push({
                // name: 'examgradelist'
                name: 'trainlist'
            })
        },
        examGradeDetail () {
            this.nextPageReload()
            this.$router.push({
                // name: 'examgradelist'
                path: '/student/examgradelist'
            })
        },
        goQp () {
            this.nextPageReload()
            this.$router.push({
                name: 'qplist'
            })
        },
        goMoreExam () {
            this.nextPageReload()
            this.$router.push({
                name: 'moreExam'
            })
        },
        getTrainList () {
            let params = {
                classId: '',
                pageNum: 1,
                pageSize: 3,
                practicalId: '',
                status: '',
                stu: ''
            }
            trainList(params).then(res => {
                this.trainList = res.data.data.list
            })
        },
        getStuGrade () {
            stuGrade({}).then(res => {
                this.gradeList = res.data.data
                this.kSScore = this.gradeList[0].scores
                this.sXSore = this.gradeList[1].scores
                this.jSScore = this.gradeList[2].scores
            })
        },
        goStart (row) {
            startExam({ examId: row.examId }).then(res => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.msg)
                    return
                }
                this.nextPageReload()
                this.$router.push({
                    name: 'studentExam',
                    query: {
                        id: row.examId,
                        endTime: row.endTime,
                        type: 1
                    }
                })
            })
        },
        ckStart (row) {
            viewExam({ examId: row.examId }).then(res => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.msg)
                    return
                }
                this.nextPageReload()
                this.$router.push({
                    name: 'studentExam',
                    query: {
                        id: row.examId,
                        endTime: row.endTime,
                        type: 2,
                        examName: row.examName
                    }
                })
            })
        },
        getList () {
            let params = {
                pageNum: this.params.pageNum,
                pageSize: this.params.pageSize,
                topic: '',
                topicId: ''
            }
            topicList(params).then((res) => {
                this.params.total = res.data.data.total
                this.topicList = res.data.data.list
            })
        },
        getExam () {
            indexExam({}).then(res => {
                this.examList3 = res.data.data.slice(0, 3)
            })
        },
        ok () {},
        cancel () {},
        showTip (index) {
            this.now = index
            this.getRelay(this.topicList[index])
        },
        updateTip () {
            this.getRelay(this.item)
        },
        getRelay (row) {
            let params = {
                pageNum: this.replyParams.pageNum,
                pageSize: this.replyParams.pageSize,
                topic: '',
                topicId: row.topicId
            }
            seeReply(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }

                this.replyList = res.data.data.list
                this.replyParams.total = res.data.data.total
                this.topicVis = true
            })
        },
        replyOne (row) {
            replyTopic({ topicId: row.topicId, topic: row.remark }).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('回复成功')
                this.getList()
                this.getRelay(row)
            })
        },
        startTraining (id) {
            this.$router.push({
                path: `/training/${id}`
            })
        }
    }, // methods end
    mounted () {
        // 获取全部讨论列表
        this.getList()
        // 获取考试列表
        this.getExam()
        // 首页综合成绩
        this.getStuGrade()
        // 首页综合实训列表
        this.getTrainList()
        console.log(this.stuTrainingStatus)
    }
}
</script>
<style>
.max-btn {
  height: 40px;
  min-width: 239px;
  border-radius: 5px;
  margin-top: 20px;
}
.text-r {
  text-align: right !important;
}
.box.gray {
  background-color: rgba(242, 242, 242, 1);
}
/deep/.relay-modal .ivu-modal-body{
    height:1800px !important;
}
</style>
<style scoped>
.h40 {
  height: 40px;
  line-height: 40px;
}
.qp img {
  margin-top: 10px;
}
.tgzs img {
  margin-top: 10px;
}

.h315 {
  height: 315px;
  text-align: center;
}
.zhcj .detail {
  text-align: right;
}
.zhcj .score {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
}
.zhcj .text {
  text-align: center;
  font-size: 16px;
  line-height: 64px;
}
.zhcj .row-border {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.zhcj .row-border .ivu-col-span-12 {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
}
.sx-title {
  font-size: 18px;
  font-weight: bold;
}

.bgw {
  background: white;
}
.mt20 {
  margin-top: 20px;
}
.bt10 {
  padding: 10px 10px;
}
.fb {
  font-weight: bold;
  font-size: 18px;
}
.pr10 {
  padding-right: 10px;
}
.tc {
  text-align: center;
}
.box {
  padding: 20px;
  font-size: 14px;
  margin-bottom: 20px;
}
.box.gray {
  background-color: rgba(242, 242, 242, 1);
}
.p10 {
  padding: 10px 10px;
}
.box .w100 {
  width: 100%;
}
.bzt {
  padding: 10px 0px;
}
.ftb {
  font-weight: bold;
}
.mt20{
    margin-top:20px;
}
.reply-box{
    font-size:14px;
    line-height: 30px;
    border-bottom:1px solid #ccc;
}
.time{
    color:#2D8cF0;
}
.reply-box .ws{
    text-indent:25px
}
.pd20{
    padding: 20px 20px;
}
.page-footer{
    margin:20px 0px;
}
</style>
